<!doctype html>
<html>
<head>
<title>Extravagant.io - DEMO: 3D Landscape</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">

<!-- Google SWFObject handler -->
<script type="text/javascript" src="demo_3d_landscape/swfobject.js"></script>
    <script type="text/javascript">
    	swfobject.registerObject("my_swfobject", "9", "expressInstall.swf");
    </script>

<style>
	
	img{
	    max-width:100%;
	}
	
	
	body {
	   position: fixed; 
  top: 0; 
  left: 0; 
	
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
        margin: 0;
        padding: 0;
		padding-top: 0px;
		 
		 height:100%; 
		
  } 
	}

	.flash_holder {
		width: 100%;
		margin: 0 auto;
	}

	#my_swfobject {
		margin: 0 auto;
	}

	.below_flash {
		margin-top: -5px;
		height: 100%;
		z-index: 999!important;
		width: 100%;
		font-size: 4em;
		text-align: center;
		vertical-align: middle;
        border-top: 4px solid black;
    }

    .above_flash {
        position: absolute;
        height: 85px;
        width: 100%;
        top:0;
        left:0;
        background-color: white;

        z-index: 999!important;
        border-bottom: 2px solid black;

        z-index: 999!important;
        border-bottom: 2px solid black;

    }


.below_flash {
		margin-top: -5px;
		height: 100%;
		background: url('demo_3d_landscape/beach_background1.jpg') center no-repeat ;
		width: 100%;
		font-size: 4em;
		text-align: center;
		vertical-align: middle;
        border-top: 2px solid black;
        
    }


.below_flash img{
    height:100%;
    width:100%;
}


.below_flash p{
    position:relative;
    z-index:9999;
    
}

#title{
      -webkit-text-fill-color: ffffff;
    color:#ffffff;
    font: bold 35px/60px Helvetica, Arial, Sans-serif;  color: #eee; text-shadow: 2px 2px 6px #000; 
    text-align:center;
    display:block;
}


#text{
    height:100%; 
    display:block; 
    height:600px;
    font: 500 18px/24px Arial;
  color: #fff;
   text-shadow: 1px 2px 4px #000; 
}

#text2{
    height:100%; 
    display:block; 
    height:600px;
    font: 500 22px/24px Arial;
  color: #fff;
   text-shadow: 1px 2px 4px #000; 
}

</style>

</head>

<body>
	<div class="flash_holder">
        <div class="above_flash"><span id="title">Extravagant.io - 3D Landscape Demo<snap></div>

         <object id="my_swfobject" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="460">
            <param name="movie" value="demo_3d_landscape/demo_3d_scene.swf" />
            <param name="wmode" value="transparent" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="demo_3d_landscape/demo_3d_scene.swf" width="100%" height="460">
                <param name="wmode" value="transparent" />
            <!--<![endif]-->
                <p>Please download Adobe Flash Player in order to be able to see this demo</p>
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>

        <div class="below_flash"> <font size=4>
           
  <span id="text2" > <br><br>Move your mouse over the scene to see the 3D effect follow the direction of your mouse.<br><br>
  <span id="text" > 
           The current version is using Flash. <br>The next version will be pure HTML5 with support for all devices as well as touch support.<br><br>
           This advanced media is perfect for any business that involves physical properties,<br> or to promote special events/contests occuring at a specific property, stadium, club, country, etc.</span>
        
         
        </div>

	</div>
</div>
</body>
</html>